<template>
	<view class="">
		<canvas canvas-id="myCanvas" :style="{'width':w,'height':h}"></canvas>
	</view>

	<!-- 用法
	 import poster from '@/components/poster/poster.vue'
	 components: {	poster },
	 <poster @getCanvasImg='getCanvasImg'></poster>
	 -->
</template>

<script>
	export default {
		props: {
			share_image: { //海报封面图
				default: () => ''
			},
		},
		components: {},
		data() {
			return {
				share_info: { //分享信息

				},
				canvas_img: null, // 保存最终生成的导出的图片地址
				rpx: 1, //比例
				w: 0,// canvas长
				h: 0,//canvas高
			}
		},
		mounted() {
			//获取屏幕宽度，获取自适应单位
			wx.getSystemInfo({
				success: (res) => {
					this.rpx = res.windowWidth / 375;
					this.w = 320 * this.rpx + 'px';
					this.h = 500 * this.rpx + 'px';
				},
			})
			this.createCanvasImage()
		},
		methods: {
			async createCanvasImage() {
				// 点击生成海报数据埋点
				let codeUrl = 'https://cdn.uviewui.com/uview/album/1.jpg' //二维码
				let coverUrl = 'https://cdn.uviewui.com/uview/album/2.jpg' //封面图
				let headUrl = 'https://cdn.uviewui.com/uview/album/3.jpg' //头像

				uni.showLoading({
					title: '生成中...'
				})

				let codeImg = new Promise((resolve) => { //二维码
					uni.getImageInfo({
						src: codeUrl,
						success: (res) => {
							resolve(res.path);
						},
						fail: (err) => {
							uni.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});

				let coverImg = new Promise((resolve) => { //封面图
					uni.getImageInfo({
						src: coverUrl,
						success: (res) => {
							resolve(res.path);
						},
						fail: (err) => {
							wx.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});


				let headImg = new Promise((resolve) => { // 头像
					wx.getImageInfo({
						src: headUrl,
						success: (res) => {
							resolve(res.path);
						},
						fail: (err) => {
							console.log(err);
							uni.showToast({
								title: '网络错误请重试',
								icon: 'loading'
							});
						}
					});
				});

				Promise.all([codeImg, coverImg, headImg]).then((result) => {
					const ctx = wx.createCanvasContext('myCanvas', this);

					let
						avatarurl_width = 44 * this.rpx, //绘制的头像宽度
						avatarurl_heigth = 44 * this.rpx, //绘制的头像高度
						avatarurl_x = 20 * this.rpx, //绘制的头像在画布上的位置
						avatarurl_y = 421 * this.rpx, //绘制的头像在画布上的位置

						coverurl_width = 280 * this.rpx, //绘制的封面宽度
						coverurl_heigth = 375 * this.rpx, //绘制的封面高度
						coverurl_x = 20 * this.rpx, //绘制的封面在画布上的位置
						coverurl_y = 20 * this.rpx, //绘制的封面在画布上的位置

						codeurl_width = 73 * this.rpx, //绘制的二维码宽度
						codeurl_heigth = 73 * this.rpx, //绘制的二维码高度
						codeurl_x = 227 * this.rpx, //绘制的二维码在画布上的位置
						codeurl_y = 407 * this.rpx; //绘制的二维码在画布上的位置


					// 白底
					// ctx.setFillStyle('#fff')
					// ctx.fillRect(0, 0, 320 * this.rpx, 500 * this.rpx)

					// 绘制一个圆角矩形

					this.strokeRoundRect(ctx, 0, 0, 320 * this.rpx, 500 * this.rpx, 12, 1, '#fff')

					// 绘制并填充一个圆角矩形
					this.fillRoundRect(ctx, 0, 0, 320 * this.rpx, 500 * this.rpx, 12,
						'rgba(255, 255, 255, 1)');

					// ctx.drawImage('/static/home/reportCode/bgco.png', 0, 0, 320, 380); // 背景图片需要本地

					ctx.save(); // 先保存状态 已便于画完圆再用
					ctx.beginPath(); //开始绘制
					//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
					ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y,
						avatarurl_width / 2, 0, Math.PI * 2, false);
					ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
					ctx.drawImage(result[2], avatarurl_x, avatarurl_y, avatarurl_width,
						avatarurl_heigth); // 推进去图片

					ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
					ctx.save();

					ctx.drawImage(result[1], coverurl_x, coverurl_y, coverurl_width,
						coverurl_heigth); // 绘制封面

					// ctx.drawImage(result[2], avatarurl_x, avatarurl_y, avatarurl_width,
					// 	avatarurl_heigth); // 绘制头像

					ctx.drawImage(result[0], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth);

					ctx.restore();
					this.canvasTextAutoLine(ctx, '玛卡巴卡', 9, 78 * this.rpx, 432 * this.rpx,
						110, 10,
						'#333',
						400, 14);
						
						this.canvasTextAutoLine(ctx, 'ID：123456', 15, 78 * this.rpx, 454 * this.rpx,
							150, 10,
							'#FE4B3D',
							400, 14);

					ctx.font = 'normal 500 14px sans-serif';
					ctx.setFillStyle('#333'); // 文字颜色 
					ctx.fillText('邀您一起赚钱', 78 * this.rpx, 474 * this.rpx); // 绘制文字

					ctx.draw(false, () => {
						// canvas画布转成图片并返回图片地址
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							success: (res) => {
								this.canvas_img = res.tempFilePath;
								this.$emit('getCanvasImg', res.tempFilePath)
							},
							fail: (err) => {
								console.log(err, '==88==');
								wx.showToast({
									title: '绘制失败'
								});
							},
							complete: () => {
								wx.hideLoading();
								wx.hideToast();
							}
						}, this);
					});

				});
			},
			/**该方法用来绘制圆角矩形 
			 *@param cxt:canvas的上下文环境 
			 *@param x:左上角x轴坐标 
			 *@param y:左上角y轴坐标 
			 *@param width:矩形的宽度 
			 *@param height:矩形的高度 
			 *@param radius:圆的半径 
			 *@param lineWidth:线条粗细 
			 *@param strokeColor:线条颜色 
			 **/
			strokeRoundRect(cxt, x, y, width, height, radius, lineWidth, strokeColor, fillColor) {
				//圆的直径必然要小于矩形的宽高          
				if (2 * radius > width || 2 * radius > height) {
					return false;
				}
				cxt.save();
				cxt.translate(x, y);
				//绘制圆角矩形的各个边  
				this.drawRoundRectPath(cxt, width, height, radius);
				cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2  
				cxt.strokeStyle = strokeColor || "#000";

				cxt.stroke();
				cxt.restore();
			},
			drawRoundRectPath(cxt, width, height, radius) {
				cxt.beginPath(0);
				//从右下角顺时针绘制，弧度从0到1/2PI  
				cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

				//矩形下边线  
				cxt.lineTo(radius, height);

				//左下角圆弧，弧度从1/2PI到PI  
				cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

				//矩形左边线  
				cxt.lineTo(0, radius);

				//左上角圆弧，弧度从PI到3/2PI  
				cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

				//上边线  
				cxt.lineTo(width - radius, 0);

				//右上角圆弧  
				cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

				//右边线  
				cxt.lineTo(width, height - radius);
				cxt.closePath();
			},
			/**该方法用来绘制一个有填充色的圆角矩形 
			 *@param cxt:canvas的上下文环境 
			 *@param x:左上角x轴坐标 
			 *@param y:左上角y轴坐标 
			 *@param width:矩形的宽度 
			 *@param height:矩形的高度 
			 *@param radius:圆的半径 
			 *@param fillColor:填充颜色 
			 **/
			fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
				//圆的直径必然要小于矩形的宽高          
				if (2 * radius > width || 2 * radius > height) {
					return false;
				}

				cxt.save();
				cxt.translate(x, y);
				//绘制圆角矩形的各个边  
				this.drawRoundRectPath(cxt, width, height, radius);
				cxt.fillStyle = fillColor || "#fff"; //若是给定了值就用给定的值否则给予默认值  
				cxt.fill();
				cxt.restore();
			},

			/**
			 * canvas文本超出范围时，自动换行
			 * @param {*} ctx
			 * @param {*} text
			 * @param {*} x
			 * @param {*} y
			 * @param {*} maxWidth
			 * @param {*} lineHeight
			 */
			canvasTextAutoLine(ctx, text, max, x, y, maxWidth, lineHeight, color = '#333', fw = '600', fs = '15') {
				let lineWidth = 0
				let lastSubStrIndex = 0
				let texts = ''
				if (text.length > max) {
					texts = text.substring(0, max + 1)
					texts = texts + '...'
				} else {
					texts = text
				}

				for (let i = 0; i < texts.length; i++) {
					lineWidth += ctx.measureText(texts[i]).width
					if (lineWidth > maxWidth) {
						ctx.font = `normal ${fw} ${fs}px sans-serif`;
						ctx.setFillStyle(color); // 文字颜色 
						ctx.fillText(texts.substring(lastSubStrIndex, i), x, y)
						y += lineHeight
						lineWidth = 0
						lastSubStrIndex = i
					}
					if (i === texts.length - 1) {
						ctx.font = `normal ${fw} ${fs}px sans-serif`;
						ctx.setFillStyle(color); // 文字颜色 
						ctx.fillText(texts.substring(lastSubStrIndex, i + 1), x, y)
					}
				}
			}

		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>

</style>